<template>
  <dialog class="contract-box" v-if="data.isVisible">
    <view class="popup-title flex">
      <view class="cancle" @click="close"> 取消</view>
      <view class="title" v-if="data.type== 'audit'">
        变更审核人
      </view>
      <view class="title" v-if="data.type== 'sign'">
        变更签署人
      </view>
      <view class="sure"></view>
    </view>

    <u-form labelPosition="left" :model="data" ref="contractFormRef">
      <view v-if="data.type== 'sign'" class="main p-l-r-32 bg-color">
        <u-form-item label="企业签署人" prop="name" labelWidth="100" class="" :required="true">
        </u-form-item>
        <view class="sign-border" v-if="data.signer_user.id > 0">
          <view class="flex sign" :class="'active'">
            <view class="list">
              <view>
                <image src="../static/images/preson-icon.png"></image>
              </view>
              <view>
                <view class="flex">
                </view>
                <text>{{ data.signer_user.show_info }}</text>
              </view>
            </view>
            <view class="small-close">
              <u-icon name="close" color="#fff" size="16" @click="signerUserPageObj.delete()"></u-icon>
            </view>
            <view class="tag">企业员工</view>
          </view>
        </view>
        <view class="flex">
          <view class="flex" style="padding-bottom: 16rpx;" @click="signerUserPageObj.open('sign')">
            <u-icon name="plus-circle" color="#4787F0" size="18"></u-icon>
            <text class="font-color font-size-28" style="padding-left: 10rpx;font-weight: 500;">添加企业签署人</text>
          </view>
        </view>
      </view>

      <view v-if="data.type== 'audit'" class="main p-l-r-32 bg-color">
        <u-form-item label="审核人" prop="name" labelWidth="100" class="" :required="true">
        </u-form-item>
        <view class="sign-border" v-if="data.audit_user.id > 0">
          <view class="flex sign" :class="'active'">
            <view class="list">
              <view>
                <image src="../static/images/preson-icon.png"></image>
              </view>
              <view>
                <view class="flex">
                </view>
                <text>{{ data.audit_user.show_info }}</text>
              </view>
            </view>
            <view class="small-close">
              <u-icon name="close" color="#fff" size="16" @click="auditUserPageObj.delete()"></u-icon>
            </view>
            <view class="tag">企业员工</view>
          </view>
        </view>
        <view class="flex">
          <view class="flex" style="padding-bottom: 16rpx;" @click="auditUserPageObj.open(data.type)">
            <u-icon name="plus-circle" color="#4787F0" size="18"></u-icon>
            <text class="font-color font-size-28" style="padding-left: 10rpx;font-weight: 500;">添加企业审核人</text>
          </view>
        </view>
      </view>
      <view class="edit-bottom-button">
        <u-button type="primary" text="保存" class="custom-style"
                  @click="submit()"
                  iconColor=""
                  :customStyle="{
                    borderRadius:'0rpx',
                    border:'none',
                    padding:'8rpx',
                    height:'100rpx',
                    lineHeight: '100rpx'
                  }"></u-button>
      </view>
    </u-form>
    <!-- 底部按钮 -->

    <user-page ref="auditUserPageRef" @return-user="auditUserPageObj.returnUser"></user-page>
    <user-page ref="signerUserPageRef" @return-user="signerUserPageObj.returnUser"></user-page>
  </dialog>
</template>
<script setup>
import {
  defineEmits,
  reactive,
  ref
} from 'vue'

import {
  membercontractDetail
} from "../api/module/contract.js"

import {
  msg, arrayPluck,
} from "../utils/common.js"
import UFormItem from "../uni_modules/uview-plus/components/u-form-item/u-form-item.vue";
import {auditUserStore, signUserStore} from "../api/module/common";
import UserPage from "./user-page.vue";

const emit = defineEmits(['returnFun']);

const data = reactive({
  isVisible: ref(false),
  audit_user: [],
  contract_id: 0,
  detail: {},
  type: 'audit',
});

// 企业审核人
const auditUserPageRef = ref(null);
const auditUserPageObj = reactive({
  open: (type) => {
    auditUserPageRef.value.open(type);
  },
  delete: () => {
    data.audit_user = {};
  },
  returnUser: (item) => {
    data.audit_user = item;
  },
});

// 企业签署人
const signerUserPageRef = ref(null);
const signerUserPageObj = reactive({
  open: (type) => {
    signerUserPageRef.value.open(type);
  },
  delete: () => {
    data.signer_user = {};
  },
  returnUser: (item) => {
    data.signer_user = item;
  },
});


const close = () => {
  data.isVisible = false;
}

const open = (id, type) => {
  data.type = type;
  data.contract_id = id;
  data.isVisible = true;
  membercontractDetail({
    member_contract_id: data.contract_id
  }).then(res => {
    data.detail = res;
    data.audit_user = res.audit_user;
    data.signer_user = res.signer_user;
  })
}

const submit = () => {
  emit('returnFun', data.detail);

  switch (data.type) {
    case 'audit':
      var user_id = data.audit_user.id || 0;
      if (user_id < 1) {
        msg('请选择企业审核人');
        return false;
      }
      auditUserStore({
        member_contract_id: data.contract_id,
        audit_user_id: user_id
      }).then(response => {
        msg(response.message);
        data.isVisible = false;
      });
      break;
    case 'sign':
      var user_id = data.signer_user.id || 0;
      if (user_id < 1) {
        msg('请选择企业审核人');
        return false;
      }
      signUserStore({
        member_contract_id: data.contract_id,
        signer_user_id: user_id
      }).then(response => {
        msg(response.message);
        data.isVisible = false;
      });
      break;
  }

}

defineExpose({
  open,
});
</script>
<style scoped lang="scss" src="/static/css/contract/initiate.scss"></style>
<style scoped lang="scss">
.contract-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 0;
  border: 1px solid #ccc;
  z-index: 10;
  width: 100%;
  height: 100%;
}

.edit-bottom-button {
  margin-top: 80rpx;
  padding: 10rpx;
}

.popup-title {
  justify-content: space-between;
  font-size: 32rpx;
  font-weight: 400;
  height: 94rpx;
  line-height: 94rpx;
  background: #33252529;
  padding: 0 32rpx;
  box-sizing: border-box;

  .cancle {
    color: rgba(0, 0, 0, 0.6);
  }

  .title {
    font-weight: 600;
    color: rgba(0, 0, 0, 0.9);
  }

  .sure {
    color: #4787f0;
  }
}
</style>